<div class="editor-row">
	<div class="section">
		<h5>Big value</h5>

		<div class="editor-option">
			<label class="small">Prefix</label>
			<input type="text" class="input-small" ng-model="panel.prefix"
				   ng-blur="render()"></input>
		</div>
		<div class="editor-option">
			<label class="small">Value</label>
			<select class="input-small" ng-model="panel.valueName"
					ng-options="f for f in ['min','max','avg', 'current', 'total']"
					ng-change="render()"></select>
		</div>
		<div class="editor-option">
			<label class="small">Postfix</label>
			<input type="text" class="input-small" ng-model="panel.postfix"
				   ng-blur="render()" ng-trim="false"></input>
		</div>
		<div class="editor-option">
			<label class="small">Null point mode
				<tip>Define how null values should handled, connected =
					ignored
				</tip>
			</label>
			<select class="input-medium" ng-model="panel.nullPointMode"
					ng-options="f for f in ['connected', 'null', 'null as zero']"
					ng-change="get_data()"></select>
		</div>
	</div>

	<div class="section">
		<h5>Big value font size</h5>

		<div class="editor-option">
			<label class="small">Prefix</label>
			<select class="input-mini" style="width: 75px;"
					ng-model="panel.prefixFontSize"
					ng-options="f for f in fontSizes"
					ng-change="render()"></select>
		</div>
		<div class="editor-option">
			<label class="small">Value</label>
			<select class="input-mini" style="width: 75px;"
					ng-model="panel.valueFontSize"
					ng-options="f for f in fontSizes"
					ng-change="render()"></select>
		</div>
		<div class="editor-option">
			<label class="small">Postfix</label>
			<select class="input-mini" style="width: 75px;"
					ng-model="panel.postfixFontSize"
					ng-options="f for f in fontSizes"
					ng-change="render()"></select>
		</div>
	</div>

	<div class="section">
		<h5>Formats</h5>

		<div class="editor-option">
			<label class="small">Unit format</label>
			<select class="input-small" ng-model="panel.format"
					ng-options="f for f in ['none','short','bytes', 'bits', 'bps', 's', 'ms', 'µs', 'ns', 'percent']"
					ng-change="render()"></select>
		</div>
	</div>
</div>

<div class="editor-row">
	<div class="section">
		<h5>Coloring</h5>
		<editor-opt-bool text="Background" model="panel.colorBackground"
						 change="setColoring({background: true})"></editor-opt-bool>
		<editor-opt-bool text="Value" model="panel.colorValue"
						 change="setColoring({value: true})"></editor-opt-bool>
		<div class="editor-option"
			 ng-show="panel.colorBackground || panel.colorValue">
			<label class="small">Thresholds
				<tip>Comma seperated values</tip>
			</label>
			<input type="text" class="input-large" ng-model="panel.thresholds"
				   ng-blur="render()" placeholder="0,50,80"></input>
		</div>
		<div class="editor-option"
			 ng-show="panel.colorBackground || panel.colorValue">
			<label class="small">Colors</label>
			<spectrum-picker ng-model="panel.colors[0]"
							 ng-change="render()"></spectrum-picker>
			<spectrum-picker ng-model="panel.colors[1]"
							 ng-change="render()"></spectrum-picker>
			<spectrum-picker ng-model="panel.colors[2]"
							 ng-change="render()"></spectrum-picker>
			<a class="pointer" ng-click="invertColorOrder()">invert order</a>
		</div>
	</div>

	<div class="section">
		<h5>Spark lines</h5>
		<editor-opt-bool text="Spark line" model="panel.sparkline.show"
						 change="render()"></editor-opt-bool>
		<editor-opt-bool text="Background mode" model="panel.sparkline.full"
						 change="render()"></editor-opt-bool>
		<div class="editor-option">
			<label class="small">Line color</label>
			<spectrum-picker ng-model="panel.sparkline.lineColor"
							 ng-change="render()"></spectrum-picker>
		</div>
		<div class="editor-option">
			<label class="small">Fill color</label>
			<spectrum-picker ng-model="panel.sparkline.fillColor"
							 ng-change="render()"></spectrum-picker>
		</div>
	</div>
</div>

<div class="editor-row">
	<div class="section">
		<h5>Value to text mapping</h5>

		<div class="editor-option">
			<label class="small">Specify mappings</label>

			<div class="grafana-target">
				<div class="grafana-target-inner">
					<ul class="grafana-segment-list">
						<li class="grafana-target-segment"
							ng-repeat-start="map in panel.valueMaps">
							<i class="icon-remove pointer"
							   ng-click="removeValueMap(map)"></i>
						</li>

						<li>
							<input type="text" ng-model="map.value"
								   placeholder="value"
								   class="input-mini grafana-target-segment-input"
								   ng-blur="render()">
						</li>
						<li class="grafana-target-segment">
							<i class="icon-arrow-right"></i>
						</li>
						<li ng-repeat-end>
							<input type="text" placeholder="text"
								   ng-model="map.text"
								   class="input-mini grafana-target-segment-input"
								   ng-blur="render()">
						</li>

						<li>
							<a class="pointer grafana-target-segment"
							   ng-click="addValueMap();">
								<i class="icon-plus"></i>
							</a>
						</li>

					</ul>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
</div>

